<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大鲵识别</title>

  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    html {
      height: 100vh;
    }

    body,
    #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      height: 100%;
      padding: 1rem;
      box-sizing: border-box;
    }

    .card-box {
      padding: .625rem;
      border: .0625rem solid #ebeef5;
      border-radius: .25rem;
      background-color: #fff;
      color: #303133;
      transition: 0.3s;
      box-shadow: 0 .125rem .75rem 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      overflow: hidden;
    }

    .nav-list {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .nav-item {
      padding: 10px 0;
    }

    .nav-name {
      padding: 3px 10px;
    }

    .nav-name:hover {
      background: #f2f3f4;
      cursor: pointer;
      border-radius: 5px;
    }

    .separate {
      margin: 0 10px;
    }

    .list-box {
      width: 100%;
      max-height: 300px;
      overflow: auto;
    }

    .list-item {
      padding: 0 10px;
      line-height: 30px;
      cursor: pointer;
    }

    .list-item:hover {
      background: #f2f3f4;
      border-radius: 5px;
    }

    .details-box {
      margin-top: 10px;
    }

    .image-box {
      display: flex;
      flex-wrap: wrap;
      max-height: 600px;
      overflow: auto;
      box-sizing: border-box;
    }

    .image-item {
      width: 20%;
      padding: 5px;
      box-sizing: border-box;
    }

    .image-item .img {
      width: 100%;
      height: 200px;
    }

    .image-item .info {
      width: 100%;
      line-height: 30px;
      margin-bottom: 10px;
      padding: 0 10px;
      border: 1px solid #000;
      box-sizing: border-box;
    }

    .green {
      color: #89c03b;
    }

    .red {
      color: #e2444d;
    }
  </style>

</head>

<body>
  <div id="app">
    <div class="container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">

      <div class="card-box">
        <div class="nav-list">
          <div class="nav-item" v-for="(nav, index) in fileStack" :key="nav.id">
            <span class="nav-name" @click="navClick(nav, index)">{{nav.name}}</span>
            <span v-if="index < fileStack.length - 1" class="separate">></span>
          </div>
        </div>
        <div class="list-box" v-if="tempData.length > 0">
          <div class="list-item" v-for="item in tempData" :key="item.id" @click="clickItem(item)">
            <i class="el-icon-folder"></i>
            {{item.name}}
          </div>
        </div>
      </div>

      <div class="details-box card-box">
        <div class="query-box ">
          <el-form :inline="true">
            <el-form-item label="上传时间">
              <el-date-picker v-model="queryParams.startTime" type="date" placeholder="开始日期" value-format="yyyy-MM-dd">
              </el-date-picker>
              ~
              <el-date-picker v-model="queryParams.endTime" type="date" placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" icon="el-icon-upload2" @click="openImgDialog">图片上传</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="image-box" v-if="dataList.length > 0">
          <div class="image-item" v-for="item in dataList" :key="item.id">
            <el-image class="img" :src="previewImgUrl + item.fileUrl"
              :preview-src-list="[previewImgUrl + item.fileUrl]">
            </el-image>

            <div class="info">是张家界大鲵：<span class="green">{{item.identifyResult}}%</span></div>
            <div class="info">识别时间：{{item.uploadTime}}</div>
          </div>
        </div>
        <el-empty v-else :image-size="200"></el-empty>

      </div>

      <el-dialog title="图片上传" :visible.sync="dialogVisible" width="30%">
        <el-upload class="upload-box" ref="uploadRef" accept=".jpeg,.png,.jpg" action="" :auto-upload="false"
          :multiple="true" :file-list="fileList" list-type="picture" :limit="3" :on-remove="handleRemove"
          :on-change="handleFileChange">
          <el-button size="small" type="primary">点击上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeImgDialog">取 消</el-button>
          <el-button type="primary" @click="confirmUpload">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</body>

<!-- import Vue before Element -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

  const dateFtt = (fmt, date) => {
    const o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      'S': date.getMilliseconds(), // 毫秒
      'W': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()], // 星期
      'w': ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()], // 周几
    }
    if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
    }
    return fmt
  };

  new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        currentSelectedNode: null,
        treeData: [
          {
            "id": 1,
            "name": "汉中大鲵",
            "parentId": null,
            "children": [
              {
                "id": 4,
                "name": "名字修改了",
                "parentId": 1,
                "children": [
                  {
                    "id": 8,
                    "name": "111",
                    "parentId": 4,
                    "children": null,
                    "createUser": null,
                    "createTime": null
                  }
                ],
                "createUser": null,
                "createTime": null
              },
              {
                "id": 5,
                "name": "12",
                "parentId": 1,
                "children": null,
                "createUser": null,
                "createTime": null
              }
            ],
            "createUser": null,
            "createTime": null
          },
          {
            "id": 2,
            "name": "河南大鲵",
            "parentId": null,
            "children": [
              {
                "id": 6,
                "name": "12",
                "parentId": 2,
                "children": null,
                "createUser": null,
                "createTime": null
              },
              {
                "id": 7,
                "name": "13",
                "parentId": 2,
                "children": null,
                "createUser": null,
                "createTime": null
              }
            ],
            "createUser": null,
            "createTime": null
          },
          {
            "id": 3,
            "name": "张家界大鲵",
            "parentId": null,
            "children": null,
            "createUser": null,
            "createTime": null
          }
        ],
        tempData: [],
        queryParams: {
          startTime: dateFtt('yyyy-MM-dd', new Date()),
          endTime: dateFtt('yyyy-MM-dd', new Date()),
          folderId: '',
        },
        dataList: [],
        previewImgUrl: 'http://10.10.200.132:9000/test/',
        dialogVisible: false,
        fileList: [],
        fileStack: [],
      }
    },
    mounted() {
      this.getTreeData();
    },
    methods: {
      getTreeData() {
        this.tempData = this.treeData;
        this.fileStack = [{ id: "", name: "全部", children: this.treeData }]
        axios.get("http://localhost:80/business/folderManage/folderTreeList").then(res => {
          console.log(res, '树结构');
          if (res.status == 200) {
            this.treeData = res.data.data;
            this.tempData = this.treeData;
            this.fileStack = [{ id: "", name: "全部", children: this.treeData }]
            this.currentSelectedNode = { id: "", name: "全部", children: this.treeData };
            this.queryParams.folderId = this.currentSelectedNode.id;
            this.getData();
          }
        })
      },
      getData() {
        this.dataList = [];
        this.loading = true;

        axios.post('http://localhost/business/identify/getFiles', this.queryParams).then(res => {
          console.log(res, '列表数据');
          if (res.status == 200) {
            this.loading = false;
            const { dataList } = res.data.data
            this.dataList = dataList;
          } else {
            this.loading = false;
          }
        }).catch(() => {
          this.loading = false;
        });
      },
      navClick(item, index) {
        console.log(item, index);
        if (item.id != this.currentSelectedNode.id) {
          this.currentSelectedNode = item;
          this.queryParams.folderId = this.currentSelectedNode.id;
          this.fileStack = this.fileStack.slice(0, index + 1);
          if (item.children && item.children.length > 0) {
            this.tempData = item.children;
          }
          this.getData();
        }
      },
      clickItem(item) {
        console.log(item, 'click');
        if (this.currentSelectedNode.id != item.id) {
          this.currentSelectedNode = item;
          this.queryParams.folderId = this.currentSelectedNode.id;
          this.fileStack.push(item);
        }
        if (item.children && item.children.length > 0) {
          this.tempData = item.children;
        } else {
          this.tempData = [];
        }
        this.getData();
      },
      reset() {
        console.log('reset');
        this.queryParams = {
          startTime: dateFtt('yyyy-MM-dd', new Date()),
          endTime: dateFtt('yyyy-MM-dd', new Date()),
          folderList: this.currentSelectedNode && this.currentSelectedNode.id ? this.currentSelectedNode.id : '',
        };
        this.getData();
      },
      openImgDialog() {
        console.log('openImgDialog');
        this.dialogVisible = true;
      },
      closeImgDialog() {
        this.dialogVisible = false;
        this.$refs.uploadRef.clearFiles();
        this.fileList = [];
      },
      checkFileType(file) {
        const fileName = file.name
        const fileType = fileName.substring(fileName.lastIndexOf('.'))
        // jpeg,.png,.jpg,.bmp,.gif
        const imgTypes = ['.jpg', '.png', '.jpeg'];
        if (!imgTypes.includes(fileType)) {
          this.$message.error(
            '不是.jpeg,.png,.jpg文件，请上传正确的图片类型'
          )
          return false;
        } else {
          return true;
        }
      },
      handleRemove(file, fileList) {
        console.log('删除图片', file, fileList);
        this.fileList = fileList;
      },
      handleFileChange(file, fileList) {
        console.log('选择图片', file, fileList);
        // let isImage = this.checkFileType(file);
        this.fileList = fileList;
      },
      confirmUpload() {
        console.log('确认上传', this.fileList);

        if (this.fileList.length === 0) {
          this.$message.warning('请选择图片后再上传');
          return;
        }

        const formData = new FormData();
        this.fileList.forEach(file => {
          formData.append('files', file.raw);
        });
        formData.append('folderId', this.currentSelectedNode.id);

        axios.post('http://localhost/business/identify/uploadFiles ', formData).then(res => {
          console.log('上传成功', res);
          this.$message.success('上传成功');
          this.$refs.uploadRef.clearFiles();
          this.dialogVisible = false;
          this.fileList = [];
          this.getData();
        }).catch(err => {
          console.log('上传失败', err);
        });

      },
    },
  })
</script>

</html>